<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="slot-example">
			<div>
				<!-- v-slot 的缩写 -->
				<current-user #default="{user}">
					{{user.firstName}}
				</current-user>


			<todo-list>
				
			</todo-list>
			</div>
		</div>	
		<!--
		具名插槽的缩写
		跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header：
		 -->
		<script type="text/javascript">
			Vue.component('todo-list',{
				data:function(){
						return {
							todos:[
								{id:1,text:'zhangsan1'},
								{id:2,text:'zhangsan2'},
								{id:3,text:'zhangsan3'},
								{id:4,text:'zhangsan4'},
							],
					}
				},
				methods:{
				}
				,
				template:`
				<ul>
					<li v-for="todo in todos"
					v-bind:key="todo.id"
					>
						{{todo.text}}
					</li>
				</ul>
				`
			})
			
			
			
			<!-- 组件里面定义的data数据，可以在 template模板里面使用 -->
			Vue.component('current-user',{
				data:function(){
						return {
							user:{
								lastName:'zhangsan',firstName:'lisi',
							}
						}
					}
				,
				template:`
				<span>
					<slot v-bind:user="user">{{user.lastName}}</slot>
				</span>
				`
			})
			
			let app=new Vue({
				el:'#slot-example',
				data:{
				},
				
			})
		</script>	
		<style type="text/css">
		</style>
	</body>
</html>
